<template>
  <back-item :title="title"></back-item>
  <div class="animated fadeInLeft user-top" v-if="show">
    <!-- 充值记录 -->
    <div style="padding: 10px; background: #fff">
      <div
        v-if="dataList.length > 0"
        v-infinite-scroll="getDataList"
        infinite-scroll-distance="20px"
        :infinite-scroll-disabled="disabled"
      >
        <div v-for="item of dataList" :key="item.id">
          <div class="item">
            <div class="left-item">
              <div>视频购买</div>
              <div>{{ tool.formatDateToYYYYMMDD(item.createTime) }}</div>
            </div>
            <div class="right-item">- {{ item.video.gold }}金币</div>
          </div>
          <div>
            <p>
              购买视频【{{ item.video.title }}】，共消费{{
                item.video.gold
              }}金币
            </p>
          </div>
        </div>
        <div v-if="loading" class="fcolor" style="text-align: center">
          <data-load-vue></data-load-vue>
        </div>
        <div
          v-if="noMore"
          class="fcolor"
          style="text-align: center; line-height: 80px"
        >
          No more
        </div>
      </div>
      <el-empty description="description" v-else />
    </div>
  </div>
  <page-loading-vue v-else></page-loading-vue>
</template>

<script setup>
import backItem from "@/components/other/back-item.vue";
import { ref, computed, onMounted } from "vue";
import tool from "@/assets/js/tool";
import dataLoadVue from "@/components/other/data-load.vue";
import pageLoadingVue from "@/components/other/page-loading.vue";
import request from "@/assets/js/request";
import { ElMessage } from "element-plus";

const title = ref("购买记录");

const dataList = ref([]);
const page = ref({
  pageNum: 1,
  total: 0,
  pages: 0,
});
const loading = ref(false);
const noMore = computed(() => dataList.value.length >= page.value.total);
const disabled = computed(() => loading.value || noMore.value);
const show = ref(false);

const getDataList = () => {
  loading.value = true;
  setTimeout(() => {
    request
      .get(`/client/video/buy/recording?pageNum=${page.value.pageNum}`)
      .then((res) => {
        if (res.code === 200) {
          dataList.value.push(...res.data.records);
          page.value.pageNum += 1;
          page.value.total = res.data.total;
          page.value.pages = res.data.pages;
          loading.value = false;
        } else {
          ElMessage.error(res.msg);
        }
        show.value = true;
      })
      .catch((err) => {
        ElMessage.error(err.message);
      });
  }, 2000);

  setTimeout(() => {
    show.value = true;
  }, 5000);
};

onMounted(() => {
  getDataList();
});
</script>

<style scoped lang="scss">
.item {
  display: flex;
  padding: 10px 0;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px #eee solid;
  .left-item {
    & > div:nth-child(1) {
      font-size: 18px;
      font-weight: 600;
      margin-bottom: 5px;
    }
    & > div:nth-child(2) {
      font-size: 14px;
      color: #686868;
    }
  }

  .right-item {
    font-size: 18px;
    font-weight: 600;
    color: #ff5d1e;
  }
}
</style>
